<template>
  <div class="template-management-container tech-page-container">
    <div class="page-container">
      <!-- 操作按钮区域 -->
      <div class="action-bar">
        <el-button type="primary" @click="showUploadModal" class="tech-button">
          <i class="bi bi-plus-circle"></i>
          新建
        </el-button>
        <el-button type="primary" @click="openCreateTemplateModal({})" class="tech-button">
          <i class="bi bi-plus-circle"></i>
          新建2
        </el-button>
      </div>

      <!-- 搜索筛选区域 -->
      <el-card class="tech-card search-card">
        <template #header>
          <div class="card-header-tech">
            <i class="bi bi-search"></i>
            <span>搜索筛选</span>
          </div>
        </template>

        <el-form :model="searchForm" :inline="true" class="search-form-tech" label-width="90px" label-position="right">
          <el-row :gutter="20">
            <el-col :md="6">
              <el-form-item label="银行代码">
                <el-input v-model="searchForm.bankCode" placeholder="如：ICBC" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="银行名称">
                <el-input v-model="searchForm.bankName" placeholder="如：中国工商银行" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="文件类型">
                <el-select v-model="searchForm.fileType" placeholder="全部" clearable>
                  <el-option label="全部" value="" />
                  <el-option label="XLSX" value="XLSX" />
                  <el-option label="XLS" value="XLS" />
                  <el-option label="CSV" value="CSV" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="全部" clearable>
                  <el-option label="全部" value="" />
                  <el-option label="启用" value="1" />
                  <el-option label="禁用" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <el-button type="primary" @click="searchTemplates" class="tech-button">
                  <i class="bi bi-search"></i>
                  搜索
                </el-button>
                <el-button @click="resetSearch" class="tech-button">
                  <i class="bi bi-arrow-clockwise"></i>
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 模板列表 -->
      <div class="template-grid" v-loading="loading">
        <div v-for="template in templateList" :key="template.id" class="template-card-tech">
          <div class="template-glow"></div>
          <div class="template-content">
            <!-- 状态标签 -->
            <div class="status-badge-tech" :class="template.status === 1 ? 'active' : 'inactive'">
              {{ template.status === 1 ? '启用' : '禁用' }}
            </div>

            <!-- 模板信息 -->
            <div class="template-info">
              <h3 class="template-title">{{ template.templateName }}</h3>
              <div class="template-details">
                <div class="detail-item">
                  <span class="label">银行：</span>
                  <span class="value">{{ template.bankName }} ({{ template.bankCode }})</span>
                </div>
                <div class="detail-item">
                  <span class="label">文件类型：</span>
                  <span class="value">{{ template.fileType }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">表头所在行：</span>
                  <span class="value">{{ template.headerRowIndex }}</span>
                </div>
              </div>

              <!-- 配置预览 -->
              <div class="config-preview-tech">
                <div class="preview-title">字段映射配置：</div>
                <div class="preview-content">
                  {{ getFieldMappingPreview(template.fieldMapping) }}
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="template-actions">
              <el-button type="primary" size="small" @click="editTemplate(template.id)" class="action-btn">
                <i class="bi bi-pencil"></i>
                编辑
              </el-button>
              <el-button type="success" size="small" @click="testTemplate(template.id)" class="action-btn">
                <i class="bi bi-play"></i>
                测试
              </el-button>
              <el-button type="danger" size="small" @click="deleteTemplate(template.id)" class="action-btn">
                <i class="bi bi-trash"></i>
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[12, 24, 48]"
          :total="totalCount" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" class="tech-pagination" />
      </div>
    </div>

    <!-- 上传模板文件模态框 -->
    <el-dialog v-model="uploadModalVisible" title="模板解析" width="600px" class="tech-dialog">
      <el-form :model="uploadForm" ref="uploadFormRef" :rules="uploadRules" label-width="120px">
        <el-form-item label="模板文件" prop="templateFile">
          <el-upload ref="uploadRef" :auto-upload="false" :limit="1" accept=".xlsx,.xls,.csv"
            :on-change="handleFileChange" :file-list="fileList">
            <el-button type="primary" class="tech-button">
              <i class="bi bi-cloud-upload"></i>
              选择文件
            </el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持上传 Excel (.xlsx, .xls) 或 CSV 文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="uploadModalVisible = false" class="tech-button">取消</el-button>
        <el-button type="primary" @click="uploadTemplateFile" class="tech-button">
          <i class="bi bi-upload"></i>
          上传并解析
        </el-button>
      </template>
    </el-dialog>

    <!-- 创建模板模态框 -->
    <el-dialog v-model="createModalVisible" :title="isEdit ? '编辑银行解析模板' : '新建银行解析模板'"
      :width="modalSize === 'large' ? '1200px' : '800px'" class="tech-dialog">
      <template #header="{ titleId, titleClass }">
        <div class="dialog-header-tech">
          <h4 :id="titleId" :class="titleClass">
            {{ isEdit ? '编辑银行解析模板' : '新建银行解析模板' }}
          </h4>
          <el-button @click="toggleModalSize" class="expand-btn" :title="modalSize === 'large' ? '缩小展示' : '放大展示'">
            <i :class="modalSize === 'large' ? 'bi bi-fullscreen-exit' : 'bi bi-arrows-fullscreen'"></i>
          </el-button>
        </div>
      </template>

      <el-form :model="templateForm" ref="templateFormRef" :rules="templateRules" label-width="120px"
        class="template-form-tech">
        <el-row :gutter="20">
          <el-col :md="12">
            <el-form-item label="银行代码" prop="bankCode">
              <el-input v-model="templateForm.bankCode" placeholder="如：ICBC" />
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="templateForm.bankName" placeholder="如：中国工商银行" />
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item label="模板名称" prop="templateName">
              <el-input v-model="templateForm.templateName" placeholder="模板名称" />
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item label="文件类型" prop="fileType">
              <el-select v-model="templateForm.fileType" placeholder="请选择文件类型" style="width: 100%">
                <el-option label="Excel" value="EXCEL" />
                <el-option label="CSV" value="CSV" />
                <el-option label="PDF" value="PDF" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item label="表头所在行号">
              <el-input-number v-model="templateForm.headerRowIndex" :min="1" placeholder="表头行号" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 字段映射配置 -->
        <el-form-item label="字段映射配置" prop="fieldMapping">
          <div class="field-mapping-container-tech">
            <div class="mapping-header">
              <span class="mapping-title">映射关系</span>
<!--              <el-button type="primary" size="small" @click="addMappingRow" class="add-mapping-btn">-->
<!--                <i class="bi bi-plus"></i>-->
<!--                添加映射-->
<!--              </el-button>-->
            </div>

            <el-table :data="fieldMappingList" class="mapping-table-tech" border size="small">
              <el-table-column label="标准库字段" width="150">
                <template #default="scope">
                  {{ standardFields.find(v => v.name === scope.row.standardField)!.description }}
                </template>
              </el-table-column>

              <el-table-column label="索引方式" width="100">
                <template #default="scope">
                  <el-select v-model="scope.row.retrievalType" placeholder="请选择索引方式" size="small" style="width: 100%">
                    <el-option v-for="field in retrievalTypeList" :key="field.type" :label="field.name"
                               :value="field.type" />
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="所在行（最小值为1）" width="130">
                <template #default="scope">
                  <el-input :disabled="scope.row.retrievalType == 1" v-model="scope.row.rowIndex" placeholder="行" size="small"/>
                </template>
              </el-table-column>

              <el-table-column label="所在列（最小值为1）" width="130">
                <template #default="scope">
                  <el-input :disabled="scope.row.retrievalType == 1" v-model="scope.row.columnIndex" placeholder="列" size="small"/>
                </template>
              </el-table-column>

              <el-table-column label="银行字段" width="200">
                <template #default="scope">
                  <el-select v-model="scope.row.bankField" placeholder="-" size="small" style="width: 100%">
                    <el-option v-for="(v, i) in bankHeaders" :key="i" :label="v"
                               :value="v" />
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="字段类型" width="150">
                <template #default="scope">
                  <el-select v-model="scope.row.fieldType" placeholder="请选择字段类型" size="small" style="width: 100%">
                    <el-option label="文本" value="text" />
                    <el-option label="日期" value="date" />
                    <el-option label="数字" value="decimal" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="格式" width="150">
                <template #default="scope">
                  <el-input :disabled="scope.row.format == 1" v-model="scope.row.format" placeholder="值格式" size="small"/>
                </template>
              </el-table-column>

<!--              <el-table-column label="操作" width="80" align="center">-->
<!--                <template #default="scope">-->
<!--                  <el-button type="danger" size="small" @click="deleteMappingRow(scope.$index)"-->
<!--                    class="delete-mapping-btn">-->
<!--                    <i class="bi bi-trash"></i>-->
<!--                  </el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="templateForm.remark" type="textarea" :rows="2" placeholder="模板备注信息" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="createModalVisible = false" class="tech-button">取消</el-button>
        <el-button type="primary" @click="saveTemplate" class="tech-button">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 测试模板模态框 -->
    <el-dialog v-model="testModalVisible" title="测试解析模板" width="800px" class="tech-dialog">
      <div class="test-section">
        <el-form-item label="选择测试文件">
          <el-upload ref="testUploadRef" :auto-upload="false" :limit="1" accept=".xlsx,.xls,.csv"
            :on-change="handleTestFileChange" :file-list="testFileList">
            <el-button type="primary" class="tech-button">
              <i class="bi bi-cloud-upload"></i>
              选择文件
            </el-button>
          </el-upload>
        </el-form-item>

        <div v-if="testResult.length > 0" class="test-result-section">
          <h4 class="result-title">解析结果预览：</h4>
          <el-table :data="testResult" class="test-result-table" border size="small" max-height="400">
            <el-table-column v-for="(value, key) in testResult[0]" :key="key" :prop="key" :label="key"
              min-width="120" />
          </el-table>
        </div>
      </div>

      <template #footer>
        <el-button @click="testModalVisible = false" class="tech-button">关闭</el-button>
        <el-button type="primary" @click="runTest" class="tech-button">
          <i class="bi bi-play"></i>
          开始测试
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadUserFile, UploadFile } from 'element-plus'
import {templateApi, commonApi, bankStatementApi, ClassFieldProperty} from '@/api'
import type { Template, TemplateSearchParams, FieldMapping } from '@/api'

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(12)
const totalCount = ref(0)
const modalSize = ref('large')
const isEdit = ref(false)
const currentTemplateId = ref<number | null>(null)

// 模态框显示状态
const uploadModalVisible = ref(false)
const createModalVisible = ref(false)
const testModalVisible = ref(false)

// 表单引用
const uploadFormRef = ref<FormInstance>()
const templateFormRef = ref<FormInstance>()
const uploadRef = ref()
const testUploadRef = ref()

// 文件列表
const fileList = ref<UploadUserFile[]>([])
const testFileList = ref<UploadUserFile[]>([])

// 字段检索方式
const retrievalTypeList = ref([
  { type: 1, name: "表头" },
  { type: 2, name: "行列" }
])

// 标准字段列表 - 从API获取
const standardFields = ref<Array<ClassFieldProperty>>([])

// 初始化标准字段
const initStandardFields = async () => {
  try {
    standardFields.value = await bankStatementApi.getStatementStandardFields()
  } catch (error) {
    // 如果API失败，使用默认字段
    standardFields.value = [
      { name: "id", description: "主键ID" },
      { name: "accountName", description: "本方账号名称" },
      { name: "bank", description: "银行简写" },
      { name: "bankFullName", description: "银行全称" },
      { name: "bankTrxNumber", description: "银行交易流水号" },
      { name: "currency", description: "货币" },
      { name: "transFlag", description: "收支标志" },
      { name: "transTypeName", description: "交易类别" },
      { name: "customerBank", description: "对方银行" },
      { name: "drAmount", description: "支出金额" },
      { name: "crAmount", description: "收入金额" },
      { name: "trxDate", description: "交易日期" },
      { name: "cashType", description: "交易类型" },
      { name: "balanceAmount", description: "交易后余额" },
      { name: "customerName", description: "交易对手方账户名称" },
      { name: "userMemo", description: "银行摘要" },
      { name: "uniqueNumber", description: "流水唯一识别号" }
    ]
  }
}

// 搜索表单
const searchForm = reactive({
  bankCode: '',
  bankName: '',
  fileType: '',
  status: ''
})

// 上传表单
const uploadForm = reactive({
  headerRowIndex: 1,
  templateFile: null as File | null
})

// 模板表单
const templateForm = reactive({
  bankCode: '',
  bankName: '',
  templateName: '',
  fileType: '',
  headerRowIndex: 1,
  remark: '',
  fileUrl: ''
})

// 字段映射列表
const fieldMappingList = ref([
  {
    bankField: '',
    standardField: '',
    fieldType: 'text',
    retrievalType: 1
  }
])

// 模板列表
const templateList = ref<any[]>([])

// 测试结果
const testResult = ref<any[]>([])

// 表单验证规则
const uploadRules: FormRules = {
  headerRowIndex: [
    { required: true, message: '请输入表头所在行', trigger: 'blur' }
  ],
  templateFile: [
    { required: true, message: '请选择模板文件', trigger: 'change' }
  ]
}

const templateRules: FormRules = {
  bankCode: [
    { required: true, message: '请输入银行代码', trigger: 'blur' }
  ],
  bankName: [
    { required: true, message: '请输入银行名称', trigger: 'blur' }
  ],
  templateName: [
    { required: true, message: '请输入模板名称', trigger: 'blur' }
  ],
  fileType: [
    { required: true, message: '请选择文件类型', trigger: 'change' }
  ],
  headerRowIndex: [
    { required: true, message: '请输入数据起始行号', trigger: 'blur' }
  ]
}

// 显示上传模态框
const showUploadModal = () => {
  uploadModalVisible.value = true
  // 重置表单
  Object.assign(uploadForm, {
    headerRowIndex: 1,
    templateFile: null
  })
  fileList.value = []
}

// 处理文件选择
const handleFileChange = (file: UploadFile) => {
  uploadForm.templateFile = file.raw as File
}

// 处理测试文件选择
const handleTestFileChange = (file: UploadFile) => {
  // 测试文件处理逻辑
}

// 上传模板文件并解析
const uploadTemplateFile = async () => {
  if (!uploadFormRef.value) return

  try {
    await uploadFormRef.value.validate()

    if (!uploadForm.templateFile) {
      ElMessage.error('请选择模板文件')
      return
    }

    const data = await templateApi.createTemplateFromFile(uploadForm.templateFile)

    ElMessage.success('模板上传并解析成功')
    uploadModalVisible.value = false
    openCreateTemplateModal(data)
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('模板上传失败')
  }
}

const bankHeaders = ref<string[]>([])

// 打开创建模板模态框
const openCreateTemplateModal = (data: any) => {
  // 设置基础信息
  if (data.headerRowIndex) {
    templateForm.headerRowIndex = data.headerRowIndex
  }
  if (data.fileType) {
    templateForm.fileType = data.fileType
  }
  if (data.fileUrl) {
    templateForm.fileUrl = data.fileUrl
  }

  if (data.headers) {
    bankHeaders.value = data.headers
  }

  // 清空现有的字段映射
  fieldMappingList.value = []

  if (data.headers && data.headers.length > 0) {
    bankHeaders.value = data.headers;
  }

  if (standardFields.value && standardFields.value.length > 0) {
    standardFields.value.forEach((v: ClassFieldProperty) => {
      fieldMappingList.value.push({
        bankField: '',
        standardField: v.name,
        fieldType: 'text',
        retrievalType: 1
      })
    })
  } else {
    // 至少添加一行空行
    fieldMappingList.value.push({
      bankField: '',
      standardField: '',
      fieldType: 'text',
      retrievalType: 1
    })
  }

  updateFieldMapping()
  createModalVisible.value = true
}

// 加载模板列表
const loadTemplates = async (page = 1) => {
  loading.value = true
  currentPage.value = page

  try {
    const params: TemplateSearchParams = {
      pageNo: page,
      pageSize: pageSize.value,
      bankCode: searchForm.bankCode || undefined,
      bankName: searchForm.bankName || undefined,
      fileType: searchForm.fileType || undefined,
      status: searchForm.status || undefined
    }

    const data = await templateApi.getTemplatePage(params)
    templateList.value = data.list || []
    totalCount.value = data.total || 0
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('加载模板列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索模板
const searchTemplates = () => {
  loadTemplates(1)
}

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    bankCode: '',
    bankName: '',
    fileType: '',
    status: ''
  })
  loadTemplates(1)
}

// 获取字段映射预览
const getFieldMappingPreview = (fieldMapping: any) => {
  if (!fieldMapping) return '暂无配置'

  try {
    const mappings = typeof fieldMapping === 'string' ? JSON.parse(fieldMapping) : fieldMapping
    if (Array.isArray(mappings) && mappings.length > 0) {
      return mappings.slice(0, 3).map((m: any) => `${m.bankField} → ${m.standardField}`).join(', ') +
        (mappings.length > 3 ? '...' : '')
    }
    return '暂无配置'
  } catch (e) {
    return '配置格式错误'
  }
}

// 添加字段映射行
const addMappingRow = () => {
  fieldMappingList.value.push({
    bankField: '',
    standardField: '',
    fieldType: 'text',
    columnIndex: fieldMappingList.value.length
  })
  updateFieldMapping()
}

// 删除字段映射行
const deleteMappingRow = (index: number) => {
  if (fieldMappingList.value.length > 1) {
    fieldMappingList.value.splice(index, 1)
    updateFieldMapping()
  } else {
    ElMessage.warning('至少需要保留一个字段映射')
  }
}

// 更新字段映射
const updateFieldMapping = () => {

}

// 切换模态框大小
const toggleModalSize = () => {
  modalSize.value = modalSize.value === 'large' ? 'normal' : 'large'
}

// 保存模板
const saveTemplate = async () => {
  if (!templateFormRef.value) return

  try {
    await templateFormRef.value.validate()

    const requestData: Template = {
      bankCode: templateForm.bankCode,
      bankName: templateForm.bankName,
      templateName: templateForm.templateName,
      fileType: templateForm.fileType,
      headerRowIndex: templateForm.headerRowIndex,
      fieldMapping: fieldMappingList.value.filter(item => item.bankField || item.standardField),
      headers: bankHeaders.value,
      remark: templateForm.remark,
      fileUrl: templateForm.fileUrl
    }

    if (isEdit.value && currentTemplateId.value) {
      requestData.id = currentTemplateId.value
      await templateApi.updateTemplate(requestData)
      ElMessage.success('模板更新成功')
    } else {
      await templateApi.createTemplate(requestData)
      ElMessage.success('模板创建成功')
    }

    createModalVisible.value = false
    loadTemplates(currentPage.value)
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error(isEdit.value ? '模板更新失败' : '模板创建失败')
  }
}

// 编辑模板
const editTemplate = async (id: number) => {
  try {
    const template = await templateApi.getTemplateById(id)

    // 填充表单数据
    Object.assign(templateForm, {
      bankCode: template.bankCode,
      bankName: template.bankName,
      templateName: template.templateName,
      fileType: template.fileType,
      headerRowIndex: template.headerRowIndex,
      remark: template.remark || '',
      fileUrl: template.fileUrl || ''
    })

    if (template.headers && template.headers.length > 0) {
      bankHeaders.value = template.headers
    }

    // 填充字段映射
    if (template.fieldMapping) {
      fieldMappingList.value = Array.isArray(template.fieldMapping) && template.fieldMapping.length > 0
        ? template.fieldMapping
        : [{
          bankField: '',
          standardField: '',
          fieldType: 'text',
          columnIndex: 0
        }]
    }

    isEdit.value = true
    currentTemplateId.value = id
    createModalVisible.value = true
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('获取模板信息失败')
  }
}

// 测试模板
const testTemplate = (id: number) => {
  currentTemplateId.value = id
  testResult.value = []
  testFileList.value = []
  testModalVisible.value = true
}

// 运行测试
const runTest = async () => {
  if (testFileList.value.length === 0) {
    ElMessage.error('请选择测试文件')
    return
  }

  if (!currentTemplateId.value) {
    ElMessage.error('模板ID不存在')
    return
  }

  try {
    const file = testFileList.value[0].raw as File
    const data = await templateApi.testTemplateParse(currentTemplateId.value, file)

    testResult.value = data || []
    if (testResult.value.length === 0) {
      ElMessage.warning('解析结果为空')
    }
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('测试解析失败')
  }
}

// 删除模板
const deleteTemplate = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定要删除这个模板吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    await templateApi.deleteTemplate(id)
    ElMessage.success('模板删除成功')
    loadTemplates(currentPage.value)
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Error:', error)
      ElMessage.error('模板删除失败')
    }
  }
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadTemplates(1)
}

const handleCurrentChange = (val: number) => {
  loadTemplates(val)
}

// 页面加载时初始化
onMounted(() => {
  initStandardFields()
  loadTemplates()
})
</script>

<style scoped>
/* 引入模板管理页面特有样式 */
@import '@/styles/template-management-specific.css';

/* 表单对齐与间距优化（仅本页） */
:deep(.search-form-tech .el-form-item) {
  align-items: center;
  margin-bottom: 12px;
}
:deep(.search-form-tech .el-form-item__label) {
  line-height: 32px;
}
:deep(.search-form-tech .el-input__wrapper),
:deep(.search-form-tech .el-select__wrapper),
:deep(.search-form-tech .el-date-editor .el-input__wrapper) {
  min-height: 36px;
}

/* 宇宙星辰科技风：卡片 + 标题样式（与列表一致，仅本页） */
.tech-card {
  background: rgba(10, 14, 25, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.08) inset,
    0 10px 30px rgba(2, 6, 23, 0.55);
}
.card-header-tech {
  color: #e5e7eb;
  border-bottom: 1px dashed rgba(99, 102, 241, 0.25);
}
.card-header-tech i {
  color: var(--el-color-primary, #6ea8fe);
}

/* 搜索表单控件暗色主题（仅本页） */
:deep(.search-form-tech .el-input__wrapper),
:deep(.search-form-tech .el-select__wrapper),
:deep(.search-form-tech .el-date-editor .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(147, 197, 253, 0.2);
  box-shadow: none;
  color: #e5e7eb;
}
:deep(.search-form-tech .el-input__wrapper:hover),
:deep(.search-form-tech .el-select__wrapper:hover),
:deep(.search-form-tech .el-date-editor .el-input__wrapper:hover) {
  border-color: rgba(147, 197, 253, 0.35);
}
:deep(.search-form-tech .el-input__inner),
:deep(.search-form-tech .el-select__selected-item),
:deep(.search-form-tech .el-date-editor .el-input__inner) {
  color: #e5e7eb;
}
:deep(.search-form-tech .el-input__inner::placeholder) {
  color: #94a3b8;
}

/* 分页：暗色 + 主色高亮（仅本页） */
:deep(.tech-pagination) {
  color: #cbd5e1;
}
:deep(.tech-pagination .btn-next),
:deep(.tech-pagination .btn-prev),
:deep(.tech-pagination .el-pagination__sizes .el-select .el-input__wrapper),
:deep(.tech-pagination .el-pagination__jump) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(147, 197, 253, 0.2);
  color: #e5e7eb;
}

/* 弹窗与列表风格统一（仅本页，作用于所有 tech-dialog） */
:deep(.tech-dialog .el-dialog) {
  background: rgba(13, 18, 34, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.35);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.12) inset,
    0 20px 60px rgba(2, 6, 23, 0.7);
  border-radius: 10px;
}
:deep(.tech-dialog .el-dialog__header) {
  border-bottom: 1px dashed rgba(99, 102, 241, 0.25);
  color: #e5e7eb;
  padding-bottom: 12px;
  margin-right: 0;
}
:deep(.tech-dialog .el-dialog__title) {
  color: #e5e7eb;
}
:deep(.tech-dialog .el-dialog__body) {
  padding-top: 16px;
  background: transparent;
}

/* 上传按钮和提示文案（上传/测试弹窗） */
:deep(.tech-dialog .el-upload .el-button.tech-button) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(147, 197, 253, 0.25);
}
:deep(.tech-dialog .el-upload .el-upload__tip) {
  color: #94a3b8;
}

/* 模板卡片微光边框（与现有样式叠加，不改变布局） */
.template-card-tech {
  border-color: rgba(99, 102, 241, 0.28);
}

/* ========== 弹窗细节统一（仅本页 .tech-dialog） ========== */

/* 关闭按钮与标题颜色 */
:deep(.tech-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: #cbd5e1;
}
:deep(.tech-dialog .el-dialog__headerbtn:hover .el-dialog__close) {
  color: var(--el-color-primary, #6ea8fe);
}

/* 弹窗页脚：分隔线与背景统一 */
:deep(.tech-dialog .el-dialog__footer) {
  border-top: 1px dashed rgba(99, 102, 241, 0.25);
  background: transparent;
}

/* 弹窗内表单：标签与控件暗色主题 */
:deep(.tech-dialog .el-form .el-form-item__label) {
  color: #cbd5e1;
}
:deep(.tech-dialog .el-input__wrapper),
:deep(.tech-dialog .el-select__wrapper),
:deep(.tech-dialog .el-textarea__inner),
:deep(.tech-dialog .el-input-number .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(147, 197, 253, 0.2);
  box-shadow: none;
  color: #e5e7eb;
}
:deep(.tech-dialog .el-input__wrapper:hover),
:deep(.tech-dialog .el-select__wrapper:hover),
:deep(.tech-dialog .el-input-number .el-input__wrapper:hover) {
  border-color: rgba(147, 197, 253, 0.35);
}
:deep(.tech-dialog .el-input__inner),
:deep(.tech-dialog .el-select__selected-item),
:deep(.tech-dialog .el-textarea__inner) {
  color: #e5e7eb;
}
:deep(.tech-dialog .el-input__inner::placeholder),
:deep(.tech-dialog .el-textarea__inner::placeholder) {
  color: #94a3b8;
}

/* 弹窗内表格：映射表/测试结果表深色主题 */
:deep(.mapping-table-tech),
:deep(.test-result-table) {
  background: transparent;
  color: #e5e7eb;
}
:deep(.mapping-table-tech .el-table__header-wrapper th),
:deep(.test-result-table .el-table__header-wrapper th) {
  background: rgba(10, 14, 25, 0.82);
  color: #cbd5e1;
  border-bottom: 1px solid rgba(99, 102, 241, 0.22);
}
:deep(.mapping-table-tech .el-table__body-wrapper td),
:deep(.test-result-table .el-table__body-wrapper td) {
  background: rgba(7, 11, 22, 0.45);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
}
:deep(.mapping-table-tech .el-table__body tr:hover > td),
:deep(.test-result-table .el-table__body tr:hover > td) {
  background: rgba(15, 23, 42, 0.55);
}

/* 弹窗自定义头部的放大按钮样式 */
:deep(.dialog-header-tech .expand-btn) {
  color: #cbd5e1;
  background: transparent;
  border-color: rgba(147, 197, 253, 0.25);
}
:deep(.dialog-header-tech .expand-btn:hover) {
  color: var(--el-color-primary, #6ea8fe);
  border-color: var(--el-color-primary, #6ea8fe);
}

/* 强制暗色科技风弹窗（修复白底，作用于本页 el-dialog[class=tech-dialog]） */
:deep(.el-dialog.tech-dialog) {
  --el-dialog-bg-color: rgba(13, 18, 34, 0.9);
  background: var(--el-dialog-bg-color) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.35);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.12) inset,
    0 20px 60px rgba(2, 6, 23, 0.7);
  border-radius: 10px;
}

/* 标题、主体、页脚统一 */
:deep(.el-dialog.tech-dialog .el-dialog__header) {
  border-bottom: 1px dashed rgba(99, 102, 241, 0.25);
  color: #e5e7eb;
  padding-bottom: 12px;
  margin-right: 0;
}
:deep(.el-dialog.tech-dialog .el-dialog__title) {
  color: #e5e7eb;
}
:deep(.el-dialog.tech-dialog .el-dialog__body) {
  padding-top: 16px;
  background: transparent;
}
:deep(.el-dialog.tech-dialog .el-dialog__footer) {
  border-top: 1px dashed rgba(99, 102, 241, 0.25);
  background: transparent;
}

/* 关闭按钮 */
:deep(.el-dialog.tech-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: #cbd5e1;
}
:deep(.el-dialog.tech-dialog .el-dialog__headerbtn:hover .el-dialog__close) {
  color: var(--el-color-primary, #6ea8fe);
}

/* 弹窗内表单控件暗色 */
:deep(.el-dialog.tech-dialog .el-form .el-form-item__label) {
  color: #cbd5e1;
}
:deep(.el-dialog.tech-dialog .el-input__wrapper),
:deep(.el-dialog.tech-dialog .el-select__wrapper),
:deep(.el-dialog.tech-dialog .el-textarea__inner),
:deep(.el-dialog.tech-dialog .el-input-number .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(147, 197, 253, 0.2);
  box-shadow: none;
  color: #e5e7eb;
}
:deep(.el-dialog.tech-dialog .el-input__wrapper:hover),
:deep(.el-dialog.tech-dialog .el-select__wrapper:hover),
:deep(.el-dialog.tech-dialog .el-input-number .el-input__wrapper:hover) {
  border-color: rgba(147, 197, 253, 0.35);
}
:deep(.el-dialog.tech-dialog .el-input__inner),
:deep(.el-dialog.tech-dialog .el-select__selected-item),
:deep(.el-dialog.tech-dialog .el-textarea__inner) {
  color: #e5e7eb;
}
:deep(.el-dialog.tech-dialog .el-input__inner::placeholder),
:deep(.el-dialog.tech-dialog .el-textarea__inner::placeholder) {
  color: #94a3b8;
}

/* 弹窗内表格（字段映射/测试结果）暗色 */
:deep(.el-dialog.tech-dialog .mapping-table-tech),
:deep(.el-dialog.tech-dialog .test-result-table) {
  background: transparent;
  color: #e5e7eb;
}
:deep(.el-dialog.tech-dialog .mapping-table-tech .el-table__header-wrapper th),
:deep(.el-dialog.tech-dialog .test-result-table .el-table__header-wrapper th) {
  background: rgba(10, 14, 25, 0.82);
  color: #cbd5e1;
  border-bottom: 1px solid rgba(99, 102, 241, 0.22);
}
:deep(.el-dialog.tech-dialog .mapping-table-tech .el-table__body-wrapper td),
:deep(.el-dialog.tech-dialog .test-result-table .el-table__body-wrapper td) {
  background: rgba(7, 11, 22, 0.45);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
}
:deep(.el-dialog.tech-dialog .mapping-table-tech .el-table__body tr:hover > td),
:deep(.el-dialog.tech-dialog .test-result-table .el-table__body tr:hover > td) {
  background: rgba(15, 23, 42, 0.55);
}
</style>
